<script setup>
import {ref} from "vue";

let status = ref(false)
// const change = () => {
//   status.value =!status.value
// }
</script>

<template>

    <div class="body">
        <input type="checkbox" v-model="status" name="" id="input">
        <div class="main" @click="status=!status">
            <div class="cir"></div>
            <div class="hh"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.body {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: #efeeee;

    input {
        width: 200px;
        height: 200px;
        -webkit-appearance: none;
        box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
        10px 10px 15px rgba(70, 70, 70, 0.12);
        border-radius: 50%;
        position: absolute;
    }

    .main {
        width: 70px;
        height: 70px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    //background-color: red;

        .cir {
            width: inherit;
            height: inherit;
            background-color: transparent;
            clip-path: polygon(50% 50%, 65% 0%,
            100% 0%, 100% 100%, 0% 100%,
            0% 0%, 35% 0%);
            border-radius: 50%;
            border: 8px solid #7a7a7a;
            position: absolute;
            transform: translate(-8px, -8px);
        }

        .hh {
            width: 8px;
            height: 40px;
            background-color: #7a7a7a;;
            border-radius: 8px;
            position: absolute;
            left: 50%;
            top: -15px;
            transform: translateX(-50%);
        }
    }
}

input:checked {
    box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5),
    10px 10px 15px rgba(70, 70, 70, 0.12),
    inset -15px -15px 15px rgba(255, 255, 255, 0.5),
    inset 15px 15px 15px rgba(70, 70, 70, 0.12);

    & ~ .main {
        .cir {
            border: 8px solid #15e38a;
        }
        .hh {
            background-color: #15e38a;
        }
    }
}
</style>